<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="swiperObj.indicatorDots" :autoplay="swiperObj.autoplay"
			:interval="swiperObj.interval" :duration="swiperObj.duration">
			<swiper-item v-for="item in pageData.bannerArr" :key="item.id">
				<image :src="config.baseUrl+item.url" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="indexCenter">
			<view class="indexTitle flex flex-y-center flex-x-between">
				<view class="flex flex-y-center">
					<image class="img1" src="@/static/images/bt.png" mode="widthFix"></image>
					<text class="p1 ml10">经典案例</text>
					<text class="p2 ml10">Classic case</text>
				</view>
				<view class="flex flex-y-center" @click="jump('/pages/jdAnli/jdAnli')">
					<text class="p3">更多</text>
					<image class="img2" src="@/static/images/jt.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="jdalBox flex flex-x-between flex-y-center flex-wrap">
				<view class="item" v-for="item in pageData.caseArr" :key="item.id"
					@click="jump('/pages/jdAnli/detail?id='+item.id)">
					<image :src="config.baseUrl+ item.imgUrl" mode="widthFix"></image>
					<text>{{item.caseName}}</text>
				</view>
			</view>
			<view class="indexTitle flex flex-y-center flex-x-between">
				<view class="flex flex-y-center">
					<image class="img1" src="@/static/images/bt.png" mode="widthFix"></image>
					<text class="p1 ml10">企业简介</text>
					<text class="p2 ml10">Company profile</text>
				</view>
			</view>
			<rich-text class="qyInfo" :nodes="pageData.qyDetail"></rich-text>
			<!-- <view class="qyInfo" v-html="pageData.qyDetail">

			</view> -->
			<view class="indexTitle flex flex-y-center flex-x-between">
				<view class="flex flex-y-center">
					<image class="img1" src="@/static/images/bt.png" mode="widthFix"></image>
					<text class="p1 ml10">合作品牌</text>
					<text class="p2 ml10">Co Branding</text>
				</view>
			</view>
			<view class="lxwmBox" @click="jump('/pages/lxwm/lxwm')">
				<swiper class="swiper" style="height: 390rpx;" circular :indicator-dots="false"
					:autoplay="swiperObj.autoplay" :interval="2000" :duration="swiperObj.duration">
					<swiper-item>
						<image src="@/static/images/hzpp/u3.png" mode="widthFix">
						</image>
					</swiper-item>
					<swiper-item>
						<image src="@/static/images/hzpp/u4.png" mode="widthFix">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<view class="indexTitle flex flex-y-center flex-x-between">
				<view class="flex flex-y-center">
					<image class="img1" src="@/static/images/bt.png" mode="widthFix"></image>
					<text class="p1 ml10">服务体系</text>
					<text class="p2 ml10">Service system</text>
				</view>
			</view>
			<view class="fwBox flex flex-wrap flex-y-center ">
				<view class="item" v-for="item in pageData.serviceArr" :key="item.id"
					@click="jumpFn('/pages/fwtx/list?name='+item.dictLabel,item.dictCode)">
					<image v-if="item.dictCode=='132'" src="@/static/images/s-01.png" mode="widthFix"></image>
					<image v-if="item.dictCode=='133'" src="@/static/images/s-04.png" mode="widthFix"></image>
					<image v-if="item.dictCode=='134'" src="@/static/images/s-07.png" mode="widthFix"></image>
					<image v-if="item.dictCode=='135'" src="@/static/images/s-08.png" mode="widthFix"></image>
					<text>{{item.dictLabel}}</text>
				</view>
			</view>

			
			<view class="indexTitle flex flex-y-center flex-x-between">
				<view class="flex flex-y-center">
					<image class="img1" src="@/static/images/bt.png" mode="widthFix"></image>
					<text class="p1 ml10">联系我们</text>
					<text class="p2 ml10">Contact us</text>
				</view>
			</view>
			<view class="lxwmBox" @click="jump('/pages/lxwm/lxwm')">
				<!-- <swiper class="swiper" circular :indicator-dots="swiperObj.indicatorDots" :autoplay="swiperObj.autoplay"
					:interval="swiperObj.interval" :duration="swiperObj.duration">
					<swiper-item v-for="(item,index) in pageData.lxwmArr" :key="item.id">
						<image :src="config.baseUrl+item.businessCard" mode="widthFix" @click="previewImageFn(index)">
						</image>
					</swiper-item>
				</swiper> -->
				<image class="ditu" src="@/static/images/ditu.png" mode="widthFix"></image>
				<!-- <view class="p1">地址：天津市宝坻区宝发道与天通路交叉路口往东约180米</view>
				<view class="p1">电话：022-57858530</view>
				<view class="p1">邮箱：autosales@northglass.com</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		editRichTextCss
	} from "@/common/tool.js"
	import config from '@/common/config.js'
	import {
		ref,
		getCurrentInstance,
		nextTick
	} from "vue";

	import {
		getBanner,
		caseList,
		getCompanyInfo,
		getServiceData,
		contactUs
	} from "@/api/index.js";
	const swiperObj = ref({
		indicatorDots: true, //是否显示面板指示点
		indicatorColor: '', //指示点颜色
		autoplay: true,
		interval: 3000, //自动切换时间间隔
		duration: 500
	})

	const pageData = ref({
		bannerArr: [],
		caseArr: [],
		serviceArr: [],
		qyDetail: null,
		lxwmArr: []
	})
	// 获取轮播图
	const getBannerFn = () => {
		getBanner({
			pageNum: 1,
			pageSize: 1000
		}).then((res) => {
			if (res.code == 200) {
				pageData.value.bannerArr = res.rows;
			}
		})
	}
	getBannerFn();
	// 获取经典案例
	const caseListFn = () => {
		caseList({
			pageNum: 1,
			pageSize: 4
		}).then((res) => {
			if (res.code == 200) {
				pageData.value.caseArr = res.rows;
			}
		})
	}
	caseListFn();
	// 获取服务体系
	const serviceListFn = () => {
		getServiceData().then((res) => {
			if (res.code == 200) {
				pageData.value.serviceArr = res.data;
			}
		})
	}
	serviceListFn();
	// 获取企业详情
	const getCompanyInfoFn = () => {
		getCompanyInfo().then((res) => {
			if (res.code == 200) {
				res.data.glassDescribe = editRichTextCss(res.data.glassDescribe)
				pageData.value.qyDetail = res.data.glassDescribe
			}
		})
	}
	getCompanyInfoFn()
	// 获取联系我们
	const contactUsFn = () => {
		contactUs().then((res) => {
			if (res.code == 200) {
				pageData.value.lxwmArr = res.rows
			}
		})
	}
	// contactUsFn()
	const previewImageFn = (index) => {
		let urls = pageData.value.lxwmArr.map((el) => {
			return config.baseUrl + el.businessCard
		})
		uni.previewImage({
			urls: urls,
			current: index,
			longPressActions: {
				success: function(data) {},
				fail: function(err) {}
			}
		});
	}
	// 跳转
	const jump = (url) => {
		uni.navigateTo({
			url: url
		})
	}
	const jumpFn = (url, code) => {
		if (code == 135) {
			return false;
		}
		uni.navigateTo({
			url: url
		})
	}
</script>
<style lang="scss" scoped>
	.swiper {
		height: 480rpx;
		width: 100%;

		image {
			width: 100%;
		}
	}

	.indexCenter {
		padding: 0 30rpx;
	}

	.indexTitle {
		height: 88rpx;

		.img1 {
			width: 40rpx;
			height: 40rpx;
		}

		.img2 {
			width: 26rpx;
		}

		.p1 {
			font-weight: 600;
			color: #333;
			font-size: 32rpx;
		}

		.p2 {
			color: #999;
			font-size: 20rpx;
		}

		.p3 {
			color: #999;
			font-size: 24rpx;
		}
	}

	.jdalBox {
		.item {
			width: 315rpx;
			text-align: center;
			font-size: 20rpx;
			color: #333;
			line-height: 60rpx;

			image {
				width: 100%;
				display: block;
				height: auto;
			}
		}
	}

	.qyInfo {
		font-size: 26rpx;
		color: #333;
		line-height: 40rpx;
		text-indent: 2em;
	}

	.fwBox {
		.item {
			width: 25%;
			text-align: center;
			font-size: 26rpx;
			line-height: 50rpx;
			color: #333;

			image {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				margin: 0 auto;
			}
		}

	}

	.lxwmBox {
		padding-bottom: 30rpx;

		.ditu {
			width: 100%;
			display: block;
		}

		.swiper {
			height: 480rpx;
			margin-bottom: 20rpx;

			image {
				width: 100%;
				display: block;
			}
		}

		.p1 {
			font-size: 26rpx;
			color: #333;
			line-height: 40rpx;
		}
	}
</style>